<template>
  <div>
    <!-- 添加按钮 -->
    <el-button type="primary" @click="addDialogVisible = true">添加</el-button>
    <el-table :data="showRoles" style="width: 1200px">
      <!-- 表格 -->
      <el-table-column prop="roleId" label="角色id" width="400" />
      <el-table-column prop="roleName" label="角色名称" width="400" />
      <!-- 编辑删除按钮 -->
      <el-table-column label="操作" width="400">
        <template #default="scope">
          <el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="small" @click="handleDelete(scope.row.roleId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 对话框来实现添加角色 -->
    <el-dialog v-model="addDialogVisible" title="添加提示" width="500" :before-close="handleClose">
      <el-form onsubmit="return false;">
        <el-form-item label="角色名称">
          <el-input v-model.trim="roleName" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addRoles">添加</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 修改对话框 -->
    <el-dialog
      v-model="updateDialogVisible"
      title="修改提示"
      width="500"
      :before-close="handleClose"
    >
      <el-form onsubmit="return false;">
        <el-form-item label="角色名称">
          <el-input v-model="roleName" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="updateDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="updateRole">修改</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 分页 -->
    <div class="example-pagination-block">
      <el-pagination
        layout="prev, pager, next"
        :total="roles.length"
        v-model:current-page="pageIndex"
        :default-page-size="8"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { getRoleApi, addRoleApi, deleteRoleApi, updateRoleApi } from '@/apis/user'
import { ElMessageBox, ElMessage } from 'element-plus'

// 定义role变量
const roles = ref<string[]>([])

// 添加提示对话框变量
const addDialogVisible = ref(false)
// 修改提示对话框变量
const updateDialogVisible = ref(false)
//定义添加/修改role的变量
const roleName = ref('')
// 接收数据库的数据
const getRole = async () => {
  const { result } = await getRoleApi()
  roles.value = result
}
//进组件先获取一次数据
onMounted(() => {
  getRole()
})
//页码
const pageIndex = ref(1)
// 每一页显示的数据
const showRoles = computed(() => {
  return roles.value.slice((pageIndex.value - 1) * 8, pageIndex.value * 8)
})
// 添加角色按钮
const addRoles = async () => {
  const res = await addRoleApi({ roleName: roleName.value })
  console.log(res)
  if (res.status === 200) {
    ElMessage({
      message: '添加成功',
      type: 'success'
    })
    getRole()
  }
  roleName.value = ''
  addDialogVisible.value = false
}
const updateId = ref<number>(0) //保存表格那一行的id
// 编辑按钮
const handleEdit = (row: any) => {
  updateDialogVisible.value = true
  // 收集这一行数据的id和角色名称
  updateId.value = row.roleId
  roleName.value = row.roleName
}
// 修改角色按钮
const updateRole = () => {
  updateRoleApi({ roleName: roleName.value, roleId: updateId.value })
  getRole()
  roleName.value = ''
  updateDialogVisible.value = false
}
// 删除按钮
const handleDelete = (id: number) => {
  ElMessageBox.confirm('是否删除?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await deleteRoleApi({ roleId: id })
      ElMessage({
        type: 'success',
        message: '删除成功'
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除取消'
      })
    })
    .finally(() => {
      getRole()
    })
}
// 取消对话框
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('是否要关闭')
    .then(() => {
      roleName.value = ''
      done()
    })
    .catch(() => {
      // catch error
    })
}
</script>

<style scoped lang="scss">
:deep(.el-table__row) {
  height: 60px;
}
</style>
